<!-- 审批详细，处理审批，查看评价的公共组件 -->
<template>
  <slot name="headline"></slot
  ><!-- 这个插槽是左上角标题的插槽 -->

  <div
    style="
      border-radius: 15px;
      background-color: rgb(223, 249, 255);
      display: flex;
      justify-content: space-between;
      margin-left: 10px;
    "
  >
    <h2 style="font-size: 18px; margin-left: 5%;margin-top: 20px;">南关区基础设施扩建项目招标流程审批</h2>
    <!-- 这个span是icon -->
    <h5 style="font-size: 14px; margin-right: 5%; color: rgb(102, 102, 122)">
      待处理审批 <span style="color: rgb(255, 204, 0)">1111</span>
    </h5>
    <!-- 这里是变量，处理状态 -->
  </div>
  <div style="margin-left: 10px">
    <p style="font-size: 14px; color: rgb(153, 153, 153)">
      审批类型: <span style="color: rgb(14, 14, 14)">建设用地审批</span>
    </p>
    <!-- span是变量 -->
  </div>
  <div
    style="
      height: 80px;
      display: flex;
      justify-content: space-between;
      margin-left: 10px;
      border-bottom: 2px solid rgb(81, 210, 210);
    "
  >
    <div style="width: 80%; height: 60px; margin-top: 15px;margin-left: 10px">
      <p class="workname">提报人姓名： <span class="workspan">贾小琴 </span></p>
      <p class="workname">提报人职务： <span class="workspan">总经理 </span></p>
      <p class="workname"> 提报人手机： <span class="workspan">18622933151</span></p>
      <p class="workname"> 提报人固定电话： <span class="workspan">022-88756952 </span> </p>
    </div>
    <div  style="border-radius: 15px; background-color: rgb(81, 210, 210); width: 13%;  height: 60px;text-align: center;  line-height: 20px;  ">
      <h2 style="color: white">
        审批材料 <span><!-- 有个icon --></span>
      </h2>
    </div>
  </div>
    <slot name="evaluate"></slot><!-- 这个插槽是审批评价管理查看评价的插槽 -->
  <div>
    <h4 style="margin-left: 10px;border-bottom:2px solid rgb(81, 210, 210) ;margin-top: 40px;color: rgb(0,204,255);">审批进度</h4>
    <div style="width:100%;height: 40px;background-color: rgb(255, 244,223);line-height: 10px;border-radius: 10px;">
       
       <p style="display: inline-block;color: rgb(102,102, 102);">当前处理机构：<span style="color:black">无<!-- 这个是动态变量，处理机构 --></span></p>
    </div>
    <div style="margin-top: 40px;">
      <el-timeline>
          <slot name="appraise"></slot> <!-- 这个插槽是查看审批的插槽 -->
          <slot name="approval"></slot><!-- 这个插槽是处理审批的插槽 -->
      </el-timeline>
    </div>
    <div style="margin-left: 70%;">
      <slot name="submiting" ></slot> <!-- 这个插槽是处理审批，提交功能的插槽 -->
      <el-button type="primary" style="width: 120px; height: 40px;background-color: rgb(0,153,255);" @click="close">关闭</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'  //使用路由
import { useRoute } from 'vue-router'

const router=useRouter()
const route=useRoute()


const close=()=>{
  router.push({name:"ApprovalList"})
} 
console.log('--------');
console.log(route.query.id);
</script>

<style scoped>
.workname {
  display: inline-block;
  width: 22%;
  font-size: 14px;
  color: rgb(153, 153, 153);
  margin-top: 22px;
  margin-right: -40px;
}
.workspan {
  color: rgb(14, 14, 14);
}
</style>